@import 'mixins';

@include b(button) {
  display: inline-block;
  vertical-align: middle;
  @include button-base();
  @include button-shape(var(--radius-md));
  @include button-theme(
    var(--button-default-background),
    var(--button-default-border),
    var(--button-default-color),
    var(--button-default-active-background),
    var(--button-default-active-border),
    var(--button-default-active-color),
    var(--button-default-background),
    var(--button-default-border),
    var(--color-text-disabled),
    var(--button-disabled-opacity),
    var(--button-default-shadow-color),
  );

  @include m(link) {
    @include button-link(
      var(--button-default-color),
      var(--button-default-active-color),
    );
  }

  @include m(ghost) {
    @include button-ghost(
      transparent,
      var(--button-default-ghost-border),
      var(--button-default-ghost-color),
      transparent,
      var(--button-default-ghost-active-border),
      var(--button-default-ghost-active-color),
      transparent,
      var(--border-disabled),
      var(--color-text-disabled),
    );
  }

  /* Button sizes */
  @include m(lg) {
    @include button-size(
      var(--button-height-lg),
      var(--button-padding-h-lg),
      var(--button-font-size-lg),
      var(--button-icon-size-lg),
    );
  }

  @include m(md) {
    @include button-size(
      var(--button-height-md),
      var(--button-padding-h-md),
      var(--button-font-size-md),
      var(--button-icon-size-md),
    );
  }

  @include m(sm) {
    @include button-size(
      var(--button-height-sm),
      var(--button-padding-h-sm),
      var(--button-font-size-sm),
      var(--button-icon-size-sm),
    );
  }

  @include m(xs) {
    @include button-size(
      var(--button-height-xs),
      var(--button-padding-h-xs),
      var(--button-font-size-xs),
      var(--button-icon-size-xs),
    );
  }

  /* Button themes */
  @include m(primary) {
    @include button-theme(
      var(--button-primary-background),
      var(--button-primary-border),
      var(--button-primary-color),
      var(--button-primary-active-background),
      var(--button-primary-active-border),
      var(--button-primary-active-color),
      var(--button-primary-background),
      var(--button-primary-border),
      var(--button-primary-color),
      var(--button-disabled-opacity),
      var(--button-primary-shadow-color),
    );

    @include m(link) {
      @include button-link(
        var(--button-primary-ghost-color),
        var(--button-primary-ghost-active-color),
      );
    }

    @include m(ghost) {
      @include button-ghost(
        transparent,
        var(--button-primary-ghost-border),
        var(--button-primary-ghost-color),
        transparent,
        var(--button-primary-ghost-active-border),
        var(--button-primary-ghost-active-color),
        transparent,
        var(--border-disabled),
        var(--color-text-disabled),
      );
    }
  }

  @include m(danger) {
    @include button-theme(
      var(--button-danger-background),
      var(--button-danger-border),
      var(--button-danger-color),
      var(--button-danger-active-background),
      var(--button-danger-active-border),
      var(--button-danger-active-color),
      var(--button-danger-background),
      var(--button-danger-border),
      var(--button-danger-color),
      var(--button-disabled-opacity),
      var(--button-danger-shadow-color),
    );

    @include m(link) {
      @include button-link(
        var(--button-danger-ghost-color),
        var(--button-danger-ghost-active-color),
      );
    }

    @include m(ghost) {
      @include button-ghost(
        transparent,
        var(--button-danger-ghost-border),
        var(--button-danger-ghost-color),
        transparent,
        var(--button-danger-ghost-active-border),
        var(--button-danger-ghost-active-color),
        transparent,
        var(--border-disabled),
        var(--color-text-disabled),
      );
    }
  }

  @include m(rect) {
    @include button-shape(0);
  }

  @include m(radius) {
    @include button-shape(var(--radius-md));
  }

  @include m(round) {
    @include button-shape(var(--radius-round));
  }

  @include m(circle) {
    @include button-shape(var(--radius-circle));
  }

  @include e(content) {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
  }
}
